<template>
    <div class="login">
        <span class="tit">
            登录
        </span>
        <div class="login-s">
            <div class="login-l">
                <div class="tips">
                    <img src="../assets/images/xiaodianshi.png" alt="">
                    <img class="ihide" src="../assets/images/xiazai.png" alt="">
                </div>
                <div class="tips1">
                    <p class="status-txt">扫描二维码登录</p>
                    <p class="app-link">请使用
                        <a href="#" target="_blank">
                            哔哩哔哩客户端</a><br>扫码登录<br>或扫码下载APP</p>
                </div>
            </div>
            <div class="login-r">
                  <div class="login-rr">
                    
  <el-tabs  v-model="activeName"  >
    <el-tab-pane label="密码登入" name="first">
            <div  class="xiala">
                 <el-dropdown>
  <span class="el-dropdown-link">
   中国大陆<i class="el-icon-arrow-down el-icon--right"></i>
  </span>
  <el-dropdown-menu slot="dropdown">
        <div v-for="item in items" :key="item.id" @click="show(item.id)">
              <el-dropdown-item>{{item.lsrc}}</el-dropdown-item>
            
        </div>
   
  </el-dropdown-menu>
</el-dropdown>
       <el-input  placeholder="请输入账号" v-model="user.username"></el-input>
            </div>
       <el-input placeholder="请输入密码" v-model="user.password" show-password ></el-input>
    </el-tab-pane>
    <el-tab-pane label="信号登入" name="second">
  <el-input v-model="input3" placeholder="手机号"></el-input>
    <el-input v-model="input4" placeholder="短信验证码"></el-input>

    </el-tab-pane>
  </el-tabs>
          
                    <div class="remember">
            <el-checkbox v-model="checked"> 
                       记住密码</el-checkbox>
                        <span>不要再自己的电脑上勾选此项</span>
                        <div class="btn-s">
                            <a href="#">忘记密码？</a>
                            <a href="#" class="wufa">无法验证？</a>
                        </div>
                        <div class="btn-box">
                            <a href="http://localhost:8080/#/play">注册</a>
                            <a href="#" @click="login()">登录
                                </a>
                        </div>
                        <div class="wb">
                            <a href="#">
                                <span> <img src="../assets/images/wb.png" alt=""></span> 微博账号登入
                            </a>
                            <a href="#">
                              <span><img src="../assets/images/qq.png" alt=""></span> qq账号登入
                            </a>
                        </div>
                    </div>
                </div>
            </div>
            <div class="footer">登录即代表你同意<a href="#">用户协议</a>和<a href="#">隐私协议</a>
            </div>
        </div>
    </div>
</template>

<script>
import '../css/login.css'
import axios from 'axios'
export default {
 data() {
      return {
        checked: true,
         input: '',
            input1:'',
             input3: '',
            input4:'',
            activeName: 'first',
            user: {},//用户信息
            items:[

            ]
      };
      
    },
methods:
{
    login()
    {   
        console.log(this.user);
         ly.http.post("/user/login",this.user).then(res=>
        {
            console.log(res.data);
            if(res.data.state)
            {
                alert(res.data.msg+"进入主页")
               location.href="http://localhost:8080/#/"
            }else
            {
                    alert(res.data.msg)
            }
        });
    },
    show(i)
    {
        console.log(i);
    }
},
 created()
  {
    axios.get("http://localhost:8081/lbt")
    .then(res => {
        
      this.items=res.data.message

    })
    .catch(err => {
      console.error(err); 
    })
  }

}
</script>

<style>

</style>